<script setup lang="ts">
import { nextTick, reactive, ref } from "vue";
import { newsCenterAdd, newsCenterEdit } from "@/services/newsApi.ts";
import JinDrawer from "@/components/framework/jin-drawer/jin-drawer.vue";
import type { FormRule } from "@/types/commonType.ts";
import matchRules from "@/utils/Regexp";
import { FormInstance, Message } from "@arco-design/web-vue";
import useFormSubmit from "@/hooks/useFormSubmit.ts";
import type { newsCenterEditType } from "@/types/newsType";

const props = defineProps({
  title: String,
  dataType: Number,
});

const formRef = ref<FormInstance>();

const loading = ref(false);

const handleSubmit = useFormSubmit(formRef);

const emits = defineEmits<{
  (e: "list"): void;
}>();

const drawer = ref<{
  init: () => void;
  close: () => void;
}>();

const options = reactive({
  title: "",
  type: 0,
});

const formModel = reactive<newsCenterEditType>({
  id: "",
  title: "",
  introduce: "",
  schedule: "",
  reward: "",
  unitRequirement: "",
  projectRequirement: "",
  submitContent: "",
  reviewRule: "",
});

const rules = reactive<FormRule>({
  title: {
    required: true,
    message: "请输入标题",
  },
  introduce: {
    required: true,
    message: "请输入赛道介绍",
  },
  schedule: {
    required: true,
    message: "请输入赛程安排",
  },
  reward: {
    required: true,
    message: "请输入奖项及奖励",
  },
  unitRequirement: {
    required: true,
    message: "请输入参赛单位要求",
  },
  projectRequirement: {
    required: true,
    message: "请输入项目要求",
  },
  submitContent: {
    required: true,
    message: "请输入项目提交内容",
  },
  reviewRule: {
    required: true,
    message: "请输入公示举报",
  },
});

const handleCancel = () => {
  drawer.value?.close();
};

const promise = (url: any, msg: string) => {
  url
    .then((res: any) => {
      if (res.code === 200) {
        Message.success(msg);
        handleCancel();
        emits("list");
      }
    })
    .finally(() => {
      loading.value = false;
    });
};

const handleOk = () => {
  loading.value = true;
  const user = JSON.parse(JSON.stringify(formModel));
  if (options.type === 0) {
    delete user.id;
    promise(newsCenterAdd(user), "新增成功");
  }
  if (options.type === 1) {
    promise(newsCenterEdit(user), "修改成功");
  }
};

const show = () => {
  tabsValue.value = 1;
  options.type = 0;
  formModel.title = "";
  formModel.id = "";
  editorRef1.value.clear();
  editorRef2.value.clear();
  editorRef3.value.clear();
  editorRef4.value.clear();
  editorRef5.value.clear();
  editorRef6.value.clear();
  editorRef7.value.clear();

  formModel.introduce = "";
  formModel.schedule = "";
  formModel.reward = "";
  formModel.unitRequirement = "";
  formModel.projectRequirement = "";
  formModel.submitContent = "";
  formModel.reviewRule = "";
  drawer.value?.init();
  loading.value = false;
  formRef.value?.clearValidate();
};

const editorRef1 = ref();
const editorRef2 = ref();
const editorRef3 = ref();
const editorRef4 = ref();
const editorRef5 = ref();
const editorRef6 = ref();
const editorRef7 = ref();

const edit = (data: newsCenterEditType) => {
  tabsValue.value = 1;
  options.type = 1;
  formModel.title = data.title;
  formModel.id = data.id;
  formModel.introduce = data.introduce;
  formModel.schedule = data.schedule;
  formModel.reward = data.reward;
  formModel.unitRequirement = data.unitRequirement;
  formModel.projectRequirement = data.projectRequirement;
  formModel.submitContent = data.submitContent;
  formModel.reviewRule = data.reviewRule;
  editorRef1.value.init(data.introduce);
  editorRef2.value.init(data.schedule);
  editorRef3.value.init(data.reward);
  editorRef4.value.init(data.unitRequirement);
  editorRef5.value.init(data.projectRequirement);
  editorRef6.value.init(data.submitContent);
  editorRef7.value.init(data.reviewRule);

  loading.value = false;
  drawer.value?.init();
  formRef.value?.clearValidate();
};

defineExpose({
  show,
  edit,
});
const tabsValue = ref("");
</script>

<template>
  <jin-drawer
    ref="drawer"
    :title="props.title"
    :width="600"
    @ok="handleOk"
    @cancel="handleCancel"
    @beforeOk="handleSubmit"
    :loading="loading"
    :ok-loading="loading"
  >
    <a-form
      auto-label-width
      :model="formModel"
      :rules="rules"
      ref="formRef"
    >
      <a-tabs v-model="tabsValue">
        <a-tab-pane key="1">
          <template #title>
            <icon-calendar /> 赛事介绍
          </template>

          <a-form-item
            label="赛事标题"
            field="title"
          >
            <a-input
              v-model="formModel.title"
              allow-clear
              placeholder="请输入赛事标题"
            />
          </a-form-item>

          <a-form-item
            label="赛道介绍"
            field="introduce"
          >
            <editor-content
              ref="editorRef1"
              v-model="formModel.introduce"
            />
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #title>
            <icon-clock-circle /> 赛程安排
          </template>
          <a-form-item
            label="赛程安排"
            field="schedule"
          >
            <editor-content
              ref="editorRef2"
              v-model="formModel.schedule"
            />
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="3">
          <template #title>
            <icon-gift /> 奖项及奖励
          </template>
          <a-form-item
            label="奖项及奖励"
            field="reward"
          >
            <editor-content
              ref="editorRef3"
              v-model="formModel.reward"
            />
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="4">
          <template #title>
            <icon-copy /> 参赛单位要求
          </template>
          <a-form-item
            label="参赛单位要求"
            field="unitRequirement"
          >
            <editor-content
              ref="editorRef4"
              v-model="formModel.unitRequirement"
            />
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="5">
          <template #title>
            <icon-strikethrough /> 项目要求
          </template>
          <a-form-item
            label="项目要求"
            field="projectRequirement"
          >
            <editor-content
              ref="editorRef5"
              v-model="formModel.projectRequirement"
            />
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="6">
          <template #title>
            <icon-attachment /> 项目提交内容
          </template>
          <a-form-item
            label="项目提交内容"
            field="submitContent"
          >
            <editor-content
              ref="editorRef6"
              v-model="formModel.submitContent"
            />
          </a-form-item>
        </a-tab-pane>
        <a-tab-pane key="7">
          <template #title>
            <icon-calendar /> 公示举报
          </template>
          <a-form-item
            label="公示举报"
            field="reviewRule"
          >
            <editor-content
              ref="editorRef7"
              v-model="formModel.reviewRule"
            />
          </a-form-item>
        </a-tab-pane>
      </a-tabs>
    </a-form>

    <template #footer>
      <a-button>
        关闭
      </a-button>
    </template>
  </jin-drawer>
</template>

<style scoped lang="scss">
</style>